<template>
	<view class="scroll-row-item course" :class="'course-'+ type" @click="goDetail(item)">
		<!-- 图文部分 -->
		<view class="position-relative">
			<image v-if="item.cover == 'null'" src="/static/c1.png" class="d-block"></image>
			<image v-else :src="item.cover" class="d-block"></image>
			<view class="font-sm text-white bg-secondary px-1">{{item.type | formatType}}</view>
		</view>
		<view class="last-child flex flex-column flex-shrink">
			<text class="text-ellipsis font-md">{{item.title}}</text>
			<slot name="desc">
				<view v-if="item.try" class="font-sm text-light-muted my-1" v-html="item.try"></view>
			</slot>
			<view class="flex flex-1 align-end">
				<!--  flex-column -->
				<slot>
					<!-- 插槽有内容就会替换slot内的元素内容，没有则显示 -->
					<text class="text-danger font" v-if="tag" style="min-width: 120rpx;">{{tag}}：</text>
					<text class="flex flex-nowrap align-end">
						<text class="text-danger font" v-if="item.price == 0">免费</text>
						<text class="text-danger font" v-else>￥{{item.price}}</text>
						<text class="text-light-muted font-sm" v-if="item.t_price">￥{{item.t_price}}</text>
					</text>
				</slot>
			</view>
		</view>
	</view>
</template>

<script>
	const coverType = {
		media: '图文',
		video: '视频',
		audio: '音频',
		column: '专栏'
	}


	export default {
		name: "course-list",
		props: {
			item: Object,
			type: {
				type: String,
				default: 'two'
			},
			tag: {
				type: String,
				default: ''
			},
			disable:false
		},
		filters: {
			formatType(type) {
				return coverType[type]
			}
		},
		methods: {
			goDetail(item) {
				if(this.disable) return
				console.log(item, 'item');
				let params = `id=${item.id}`
				if (this.item.group_id) {
					params += `&group_id=${this.item.group_id}`
				}
				if(this.item.flashsale_id) {
					params+=`&flashsale_id=${this.item.flashsale_id}`
				}
				
				let url = '/pages-media/course/course?' + params
				if (!item.type || item.type === 'column') {
					url = '/pages-media/column/column?' + params
				}
				if(item.type === 'live') {
					url = `/pages-media/live/live?id=${item.id}`
				}
				this.$navigateTo(url)
			}
		},
		data() {
			return {

			};
		}
	}
</script>

<style scoped lang="less">
	.course {
		view:first-child {
			view {
				position: absolute;
				right: 10rpx;
				bottom: 10rpx;
				background-color: rgba(0, 0, 0, .4);
			}
		}
	}

	.course-two {
		width: 340rpx;
		margin-left: 20rpx;
		margin-bottom: 20rpx;

		view {

			&:first-child,
			image {
				width: 340rpx;
				height: 180rpx;
				margin-right: 20rpx;
			}

			.last-child {
				text {
					margin-top: 10rpx;
				}
			}
		}
	}

	.course-one {
		display: flex !important;
		margin-left: 20rpx;
		margin-bottom: 20rpx;

		.last-child {
			width: 340rpx;
			height: 180rpx;
		}

		view {

			&:first-child,
			image {
				width: 340rpx;
				height: 180rpx;
				flex-shrink: 1;
				margin-right: 20rpx;
			}

			.last-child {
				width: 340rpx;
				height: 180rpx;
			}
		}
	}
</style>
